<template>
    <div class="pay-methods">
        <p class="pay-amount">需支付金额：<span class="amount">2000.00</span><span class="unit">元</span></p>
        <div class="methods-container">
            <van-grid class="methods" :border="false" :column-num="3" :gutter="23">
                <van-grid-item v-for="(item, index) in methodsArr" :key="index" @click="toPath(item)">
                    <div class="method-item">
                        <img :src="item.img" alt="">
                        <p>{{ item.title }}</p>
                    </div>
                </van-grid-item>
            </van-grid>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            methodsArr: [
                {
                    title: '微信支付',
                    img: '/img/pay_wechat.png',
                    path: '/wechatPay'
                },
                {
                    title: '支付宝',
                    img: '/img/pay_ali.png',
                    path: '/aliPay'
                },
                {
                    title: '银行卡',
                    img: '/img/pay_union.png'
                },
                {
                    title: '聚合支付',
                    img: '/img/pay_agg.png',
                    path: '/aggregatePay'
                },
                {
                    title: '电子医保',
                    img: '/img/pay_ecard.png',
                    path: '/EMICPay'
                }
            ]
        }
    },
    methods: {
        toPath(item) {
            if (!item.path) return
            this.$router.push(item.path)
        }
    }
}
</script>
<style lang="scss" scoped>
.pay-methods {
    padding: 16px;
    box-sizing: border-box;
    .pay-amount {
        height: 71px;
        line-height: 71px;
        text-align: center;
        font-size: 28px;
        font-family: SimHei;
        font-weight: 400;
        color: #27282A;
    }
    .amount {
        font-size: 34px;
        color: #FF1717FF;
    }
    .unit {
        color: #FF1717FF;
    }
    .methods-container {
        padding: 0 124px !important;
        margin-top: 40px;
        box-sizing: border-box;
    }
    .methods {
        box-sizing: border-box;
        .van-grid-item {
            height: 114px;
            ::deep(.van-grid-item__content) {
                border: 3px solid #DFE2FC;
                border-radius: 14px;
            }
        }
    }
    .method-item {
        display: flex;
        align-items: center;
        background: #fff;
        margin: 12px;
        img {
            width: 142px;
        }
        p {
            font-size: 28px;
            font-family: SimHei;
            font-weight: 400;
            color: #27282A;
        }
    }
}
</style>